<template>
  <div>
    <div  class="outer">
      <h2>{{count}}</h2>
      <button @click="dec">累减</button>
      <button @click="addName">新增一个人名</button>
      <button @click="destroy">卸载我自己</button>
      <button @click="add">累加</button>
    </div>
  </div>
</template>

<script>
export default {
  name : 'List',
  data () {
    return {
      count : 0
    }
  },
  methods : {
    add () {
      this.count++;
      this.$emit('count',this.count)
      console.log(this.$emit);
    },
    dec() {
      this.count--;
      this.$emit('count',this.count)
    },
    addName(){
       this.$emit("list", "xiaowang");
    },
    destroy() {
      this.$destroy()
    }
  },
  beforeDestroy(){
    this.$off();
  }
}
</script>

<style scoped>
.outer {
  height: 200px;
  margin: 30px;
  background: pink;
}
</style>